<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>绿色联盟</title>
    <style>
        body {
            background-color: rgb(240, 240, 240);
            margin: 0px;
            padding: 0px;
        }

        #topBack {
            height: 600px;
            width: 100%;
            overflow: hidden;
            background-image: url("./images/backtop.jpg");
            background-size: 100% auto;
            color: white;
        }

        #topBack img {
            width: 100%;
            /*position: fixed;*/
            /*z-index: 0;*/
        }

        #topBack .col-mid {
            width: 60%;
            margin-left: auto;
            margin-right: auto;
            height: 100%;
            /*z-index:1000;*/
        }

        .col-mid {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .sub-box {
            width: 100%;
            padding-left: auto;
            padding-right: auto;
            text-align: center;
        }

        #read-more {
            background-color: rgb(232, 232, 232);
            color: rgb(90, 126, 159);
        }

        #back1 {
            border: solid;
            height: 600px;
            width: 100%;
        }
        #back2 {
            border: solid;
            height: 600px;
            width: 100%;
        }
        #back3 {
            border: solid;
            height: 600px;
            width: 100%;
        }

        #end{
            border: solid;
            height: 400px;
            width: 100%;
        }

        #flow-divs {
            height: 200px;
            width: 60%;
            position: absolute;
            margin-top: 550px;
            border: solid;
            display: flex;
            flex-direction: row;
        }

        .flow-in {
            width: 30%;
            background-color: white;
            height: 100%;
        }

    </style>
</head>
<body class="col-mid">
<div id="topBack">
    <!--<img src="./images/backtop.jpg">-->
    <div class="col-mid">
        <div class="sub-box" id="logo-div">
            绿色联盟
        </div>
        <div class="sub-box" id="guide-div">
            <table>
                <tbody>
                <tr>
                    <td>首页</td>
                    <td>关于我们</td>
                    <td>企业研发</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="sub-box">
            <h1>
                污水处理 解决方案
            </h1>
            <h2>
                ASDFGHJKL
            </h2>

        </div>
        <div class="sub-box" id="read-more">
            READ MORE
        </div>
    </div>
</div>

<div id="flow-divs">
    <div class="col-mid flow-in">
        印染厂.公开招标
    </div>
    <div class="col-mid flow-in" style="margin-left: auto;margin-right: auto">
        环保企业.订购产品
    </div>
    <div class="col-mid flow-in">
        <h3>
            供应商.查看数据
        </h3>
        <p>
            供应商可通过查看环保服务企业在平台上订购产品的数据，
            根据ERP系统进行计划生产、计划配送，以确保产品的及时供应，实现库存
        </p>
    </div>
</div>

<div id="back1">
    企业研发
</div>

<div id="back2">
    平台服务
</div>

<div id="back3">
    新闻中心
</div>


<div id="end">
    <table>
        <thead>
        <tr>
            <th>关于我们</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>公司介绍</td>
        </tr>
        </tbody>
    </table>

</div>

</body>
</html>